<template>
	<view class="myself-view-function">
		<view class="myself-view-function-group">
			<view class="myself-view-function-item" v-for="item in functionData" :key="item.name">
				<image :src="item.icon"></image>
				<view class="myself-view-function-item-text">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				functionData: [
					{
						name: '我的地址',
						icon: '/static/icon/myself/address.svg'
					},
					{
						name: '我的客服',
						icon: '/static/icon/myself/kefu.svg'
					},
					{
						name: '我的账单',
						icon: '/static/icon/myself/order.svg'
					},
					{
						name: '建议反馈',
						icon: '/static/icon/myself/fankui.svg'
					}
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	.myself-view-function {
		width: 670rpx;
		padding: 20rpx;
		
		.myself-view-function-group {
			width: 100%;
			border-radius: 10rpx;
			border: 1rpx solid #cccccc;
			display: flex;
			background-color: #ffffff;
			padding: 20rpx;
			
			.myself-view-function-item {
				width: 25%;
				text-align: center;
				
				image {
					width: 120rpx;
					height: 120rpx;
				}
				
				.myself-view-function-item-text {
					
				}
			}
		}
	}
</style>